<template>
  <div class="container">
    <vm-overlay v-if="show"
                :show="true"
                :hasAnimation="true"
                :canAutoClose="false"></vm-overlay>
    <div class="dialog-box"
         v-if="show"
         :style="{top:top+'px'}">
      <div class="dialog-content">
        <slot name="title">
          <text class="content-title">{{title}}</text>
        </slot>
        <slot name="content">
          <text class="content-subtext"
                v-if="content">{{content}}</text>
        </slot>
      </div>

      <div class="dialog-footer">
        <div class="footer-btn cancel"
             v-if="!single"
             @click="cancelClicked">
          <text class="btn-text"
                :style="{ color: cancelColor }">{{cancelText}}</text>
        </div>
        <div class="footer-btn confirm"
             @click="confirmClicked">
          <text class="btn-text"
                :style="{ color: confirmColor }">{{confirmText}}</text>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VmOverlay from './vm-overlay.vue'

export default {
  components: { VmOverlay },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    single: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    top: {
      type: Number,
      default: 400
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    cancelColor: {
      type: String,
      default: '#666666'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    confirmColor: {
      type: String,
      default: '#42bd56'
    }
  },
  data: () => ({
    pageHeight: 1334
  }),
  created() {
    const { env: { deviceHeight, deviceWidth } } = weex.config
    this.pageHeight = deviceHeight / deviceWidth * 750
  },
  methods: {
    cancelClicked() {
      this.$emit('cancelClicked', { type: 'cancel' })
    },
    confirmClicked(e) {
      this.$emit('confirmClicked', { type: 'confirm' })
    }
  }
}
</script>


<style scoped>
.container {
  position: fixed;
  width: 750px;
  /*兼容H5异常*/
  z-index: 99999;
}
.dialog-box {
  position: fixed;
  left: 96px;
  width: 558px;
  background-color: #ffffff;
  border-radius: 6px;
}
.dialog-content {
  padding-top: 36px;
  padding-bottom: 36px;
  padding-left: 36px;
  padding-right: 36px;
}
.content-title {
  color: #333333;
  font-size: 32px;
  text-align: center;
}
.content-subtext {
  color: #666666;
  font-size: 28px;
  margin-top: 24px;
  line-height: 36px;
  text-align: center;
}
.dialog-footer {
  flex-direction: row;
  align-items: center;
  border-top-color: #dee2e6;
  border-top-width: 1px;
}
.footer-btn {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 86px;
}
.footer-btn:active {
  background-color: #eee;
}
.cancel {
  border-right-color: #dee2e6;
  border-right-width: 1px;
}
.btn-text {
  font-size: 30px;
  color: #666666;
}
</style>
